<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_边框与内间距</title>
    <style>
        .z1{
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            border: 5px solid green;/*设置四个方向的边框*/
            border-bottom: 15px dotted purple;/*也可以设置单方向的边框*/
            margin-bottom: 30px;
        }
        .z2{
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
            /*边框圆角，值越大，角越圆，如果值为正方形宽高的一半，可以切正圆*/
            border-radius: 100px;
            margin-bottom: 30px;
        }
        .z3{
            width: 200px;
            height: 60px;
            background-color: lightblue;
            /*如果值为长方形高度的一半，可以切胶囊形*/
            border-radius: 30px;
        }
        .z4{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            /*无论加边框还是内间距，都会让元素本身的大小变大*/
            padding: 10px;
            padding: 10px 20px;
            padding: 10px 20px 30px;
            padding: 10px 20px 30px 40px;
            padding-top: 50px;
            margin: 20px;
        }
        .z5{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 20px;
            margin: 30px;
            /*切换盒子模型的计算方案：为边框盒子
            效果：将内"间距+边框+内容"的总大小都算在预设的宽高之内！靠压缩内容的大小来实现
            注意：此方案必须要有预设的宽高！否则无法生效！*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1">111</div>
    <div class="z2">222</div>
    <div class="z3">333</div>
    <div class="z4">444</div>
    <div class="z5">555</div>
</div>
</body>
</html>